<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Data | DOT language playground</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="../../../../standalone/umd/vis-network.min.js"></script>

    <style type="text/css">
      body,
      html {
        font: 10pt sans;
        line-height: 1.5em;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        color: #4d4d4d;
        box-sizing: border-box;
        overflow: hidden;
      }

      #header {
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
      }

      #contents {
        height: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
      }

      #left,
      #right {
        position: absolute;
        width: 50%;
        height: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        display: inline-block;
      }

      #left {
        top: 0;
        left: 0;
      }

      #right {
        top: 0;
        right: 0;
      }

      #error {
        color: red;
      }

      #data {
        width: 100%;
        height: 100%;
        border: 1px solid #d3d3d3;
        box-sizing: border-box;
        resize: none;
      }

      #draw {
        padding: 5px 15px;
      }

      #mynetwork {
        width: 100%;
        height: 100%;
        border: 1px solid #d3d3d3;
        box-sizing: border-box;
      }

      a:hover {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>DOT language playground</h1>

      <p>
        Play around with the DOT language in the textarea below, or select one
        of the following examples:
      </p>
      <p style="margin-left: 30px">
        <a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
        <a href="#" class="example" data-url="data/computer_network.gv.txt"
          >computer network</a
        >,
        <a href="#" class="example" data-url="data/cellular_automata.gv.txt"
          >cellular automata</a
        >,
        <a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt"
          >fsm *</a
        >,
        <a href="#" class="example" data-url="graphvizGallery/hello.gv.txt"
          >hello *</a
        >,
        <a href="#" class="example" data-url="graphvizGallery/process.gv.txt"
          >process *</a
        >,
        <a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt"
          >siblings *</a
        >,
        <a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt"
          >softmaint *</a
        >,
        <a
          href="#"
          class="example"
          data-url="graphvizGallery/traffic_lights.gv.txt"
          >traffic lights *</a
        >,
        <a
          href="#"
          class="example"
          data-url="graphvizGallery/transparency.gv.txt"
          >transparency *</a
        >,
        <a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt"
          >twopi2 *</a
        >,
        <a href="#" class="example" data-url="graphvizGallery/unix.gv.txt"
          >unix *</a
        >,
        <a href="#" class="example" data-url="graphvizGallery/world.gv.txt"
          >world *</a
        >
      </p>
      <p>
        The examples marked with a star (*) come straight from the
        <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
      </p>
      <div>
        <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
        <span id="error"></span>
      </div>
    </div>

    <div id="contents">
      <div id="left">
        <textarea id="data">
digraph {
  node [shape=circle fontsize=16]
  edge [length=100, color=gray, fontcolor=black]

  A -> A[label=0.5];
  B -> B[label=1.2] -> C[label=0.7] -- A;
  B -> D;
  D -> {B; C}
  D -> E[label=0.2];
  F -> F;
  A [
    fontcolor=white,
    color=red,
  ]
}
    </textarea
        >
      </div>
      <div id="right">
        <div id="mynetwork"></div>
      </div>
    </div>

    <script type="text/javascript">
      // create a network
      var container = document.getElementById("mynetwork");
      var options = {
        physics: {
          stabilization: false,
          barnesHut: {
            springLength: 200,
          },
        },
      };
      var data = {};
      var network = new vis.Network(container, data, options);

      $("#draw").click(draw);

      $("a.example").click(function (event) {
        var url = $(event.target).data("url");
        $.get(url)
          .done(function (dotData) {
            $("#data").val(dotData);
            draw();
          })
          .fail(function () {
            $("#error").html(
              "Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below."
            );
            resize();
          });
      });

      $(window).resize(resize);
      $(window).load(draw);

      $("#data").keydown(function (event) {
        if (event.ctrlKey && event.keyCode === 13) {
          // Ctrl+Enter
          draw();
          event.stopPropagation();
          event.preventDefault();
        }
      });

      function resize() {
        $("#contents").height($("body").height() - $("#header").height() - 30);
      }

      function draw() {
        try {
          resize();
          $("#error").html("");

          // Provide a string with data in DOT language
          data = vis.parseDOTNetwork($("#data").val());

          network.setData(data);
        } catch (err) {
          // set the cursor at the position where the error occurred
          var match = /\(char (.*)\)/.exec(err);
          if (match) {
            var pos = Number(match[1]);
            var textarea = $("#data")[0];
            if (textarea.setSelectionRange) {
              textarea.focus();
              textarea.setSelectionRange(pos, pos);
            }
          }

          // show an error message
          $("#error").html(err.toString());
        }
      }
    </script>
  </body>
</html>
